<template>
  <div v-if="showChart" ref="chart" style="width: 100%; height: 100%"></div>
  <nodata-box v-else></nodata-box>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'StackBarChart',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    xAxisData: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    legendsData: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    showChart: function () {
      return this.data.length > 0
    },
    series: function () {
      return this.data.map((item, index) => {
        return {
          type: 'bar',
          name: this.legendsData[index] || '',
          data: item,
          barWidth: '24px',
          barMinHeight: 5,
          stack: 'x',
          emphasis: {
            disabled: true
          }
        }
      })
    }
  },
  watch: {
    data() {
      this.$nextTick(() => this.updateChart())
    }
  },
  mounted() {
    this.init()
    // 屏幕缩放的时候，重绘echart
    window.addEventListener('resize', this.resize, false)
  },
  unmounted() {
    this.destroyChart()
    window.removeEventListener('resize', this.resize, false)
  },
  methods: {
    init() {
      if (!Array.isArray(this.data) || this.data.length === 0) {
        return
      }
      const currentOptions = this.buildBarOption()
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(currentOptions)
    },
    buildBarOption() {
      return {
        legend: {
          show: true,
          right: 16,
          top: 20,
          bottom: 20,
          itemWidth: 0,
          itemHeight: 0,
          formatter: function (name) {
            return '{rect|} {a|' + name + '}' // 使用 rect 标记 + 文本的方式来自定义 icon
          },
          // 自定义图例样式
          textStyle: {
            rich: {
              rect: {
                width: 8,
                height: 8,
                borderRadius: 2,
                backgroundColor: '{color| }',
                fontFamily: 'PingFangSC-Regular, PingFang SC'
              },
              a: {
                color: '#262626',
                fontSize: 12,
                fontWeight: 400,
                fontFamily: 'PingFangSC-Regular, PingFang SC'
              }
            }
          }
        },
        color: ['#3366ff', '#FFE669'],
        grid: {
          top: 60,
          right: 16,
          bottom: 16,
          left: 20,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '14px',
            color: '#262626',
            fontWeight: '400'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid', // 将虚线改为实线
              width: 32, // 设置背景的宽度
              color: 'rgba(51,102,255,0.1)',
              opacity: 0.8,
              z: -100
            }
          },
          extraCssText:
            'box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16);border-radius: 2px;border: 1px solid #D9D9D9;padding: 8px;min-width: 115px;box-sizing: border-box;',
          formatter: function (params) {
            let legendHtml = `<div class="title">${params[0].axisValueLabel}事件</div>`
            for (const item of params) {
              const { color, seriesName, value } = item
              legendHtml += `<div class="series-item"><div class='marker' style="background-color:${color}"></div><div class="content-container"><div class="content-name">${seriesName}</div><div class="content-value">${value}</div></div></div>`
            }
            return legendHtml
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12,
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            fontWeight: 400,
            color: '#8C8C8C'
          }
        },
        yAxis: {
          axisLabel: {
            fontSize: 12,
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            fontWeight: 400,
            color: '#262626'
          },
          name: '个',
          nameLocation: 'end', // 设置标题位置为中间
          nameGap: 12,
          nameTextStyle: {
            fontSize: 12,
            align: 'right',
            verticalAlign: 'bottom',
            padding: [0, 8, 0, 0],
            color: '#262626'
          }
        },
        series: this.series
      }
    },
    resize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    destroyChart() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    updateChart() {
      this.chart.setOption(this.buildBarOption())
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep {
  .marker {
    display: inline-block;
    margin-right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }
  .title {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5c5c;
    line-height: 17px;
    margin-bottom: 5px;
  }
  .series-item {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
    .content-container {
      flex: 1;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 17px;
      width: 80%;
      .content-name {
        float: left;
        color: #5c5c5c;
        font-weight: 400;
      }
      .content-value {
        float: right;
        font-weight: 500;
        color: #262626;
        margin-left: 8px;
      }
    }
  }
}
</style>
